import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import style from './AllMusicScore.module.less'
import demo from "@assets/image/demo.jpg";
import {AllMusicPuinstrumentRequest} from "@requests/Music";
import Loading from "@utils/Loading";
class AllMusicScore extends Component {
    state={
        MusicPu:null
    }
    componentDidMount() {
        this.getInstrumentMusic()
    }
    getInstrumentMusic = async()=>{
        const response = await AllMusicPuinstrumentRequest()
        // console.log(response)
        this.setState({
            MusicPu : response.results
        })
    }
    ClickHidden = (id) => {
        // let id = event.target.id
        // console.log(1)
        this.props.history.push(`/Musical/MusicScore/${id}`, id)
    }
    render() {
        if(this.state.MusicPu === null) {
            return (
                <Loading/>
            )
        }
        const musicPu = this.state.MusicPu;
        console.log(musicPu)
        return (
            <div className='center'>
                <div className={style.box}>
                   <div className={style.left}>
                       <p className={style.p}>guitar</p>
                       <ul>
                           {musicPu.map(item => {
                               // onClick={ this.ClickHidden(item.id)}
                               return (
                                   <li key={item.id}  onClick={() => {this.ClickHidden(item.id)}} >
                                       <div  style={{ backgroundImage: `url(${process.env.REACT_APP_BASE_URL}${item.img})`, width: '100%', height: '100%', backgroundSize: 'cover' }}></div>
                                       <div className={style.text} >
                                           <h1>《{item.title}》 </h1>
                                           <p className={style.author}>作者：{item.author}</p>
                                           <p className={style.brief}>曲谱简介：{item.breif}</p>
                                           <p className={style.date}>{item.date}</p>
                                       </div>
                                   </li>
                               )
                           })}

                       </ul>
                   </div>

                    <div className = {style.right}>
                        <p className={style.p}>相关话题</p>
                        <ul>
                            <li>
                                <div className={style.one}>
                                    <img src={demo} alt="" />
                                </div>
                                <div className={style.two}>
                                    <p>曲谱曲谱曲谱</p>
                                </div>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(AllMusicScore);